<template>
  <div class="example">
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
    <div class="btn">
       <input type="radio" name="v-a" value="v-a" v-model="value">组件A
       <input type="radio" name="v-b" value="v-b" v-model="value">组件B
    </div>
  </div>
</template>

<script>
/**
 * 例子 - 多个组件的过渡
 */
import va from './demo/v-a';
import vb from './demo/v-b';

export default {
  data() {
    return {
      view: 'v-a',
      value: 'v-a'
    }
  },
  components: {
    'v-a': va,
    'v-b': vb
  },
  watch: {
    value(val) {
      this.view = val;
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  margin-top: 30px;
}

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
